<template>
  <div class="tw-main">
    <div class="screen">
      <el-row class="tw-grid">
        <el-col :md="24" :lg="12" class="tw-grid__left">
          <tw-card
          :label="$t('m.fullDataSynSta')"
          >
            <div class="tw-box">
              <tw-echarts
                id="echarts_businessData"
                ref="echarts_businessData"
                :additionalOptions="additionalOptions['echarts_businessData']"
                height="82vh"
              ></tw-echarts>
            </div>
          </tw-card>
        </el-col>
        <el-col :md="24" :lg="12" class="tw-grid__right">
          <tw-card
          :label="$t('m.dataExchangeMonitor')"
          >
            <tw-echarts
              id="echarts_dataChangeMonitoring"
              ref="echarts_dataChangeMonitoring"
              :additionalOptions="additionalOptions['echarts_dataChangeMonitoring']"
              height="82vh"
            ></tw-echarts>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
// import TwLinebar from './Forecase/linebar.vue'
// import TwFourscatter from './Forecase/fourscatter.vue'
export default{
  created () {
    // echarts_businessData 全网业务数据同步统计
    this.$axios.get('/static/weishidataview/jsondata/echarts_businessData.json').then(response => {
      this.additionalOptions.echarts_businessData = response.data
    }, response => {
      console.log('error')
    })
    // echarts_dataChangeMonitoring 数据交换大盘
    this.$axios.get('/static/weishidataview/jsondata/echarts_dataChangeMonitoring.json').then(response => {
      this.additionalOptions.echarts_dataChangeMonitoring = response.data
    }, response => {
      console.log('error')
    })
  },
  mounted () {
    window.onresize = () => {
      this.$refs['echarts_businessData'].resizeChart()
      this.$refs['echarts_dataChangeMonitoring'].resizeChart()
    }
  },
  props: [],
  data () {
    return {
      additionalOptions: {
        echarts_businessData: {},
        echarts_dataChangeMonitoring: {}
      }
    }
  },
  components: {
    TwCard,
    TwEcharts
  }
}
</script>

<style scoped></style>
